<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app" v-cloak>
			<p>{{message}}</p>
			<p>{{message}}</p>
			<p>{{message}}</p>
			<p>{{message}}</p>
			<p>{{message}}</p>
			<p>{{message}}</p>
			<p v-text="message"></p>
		</div>
		<script>
			// DOM结构为模板，先把DOM结构渲染出来，Vue会找到这个模板，进行解析，绑定值绑定在指定的位置，重新替换原来的DOM结构
			/*
				v-text 同 {{}}
				v-cloak:
					隐藏未编译的 Mustache 标签直到实例准备完毕
			*/
			let message = 'hello,vue';
			setTimeout(function (){
				let vm = new Vue({
					el: '#app',
					data: { 
						message
					}
				});	
			},1000)



		</script>
	</body>
</html>